<template>
  <div class="template">
     <div class="search">
      <div class="search-center">
        <div class="search-item">
            <Input clearable
            v-model="search.nickname"
            placeholder="用户昵称"
            style="width: 150px;"
            ></Input>
        </div>
        <div class="search-item">
            <Input clearable
            v-model="search.phone"
            placeholder="请输入手机号"
            style="width: 150px;"
            ></Input>
        </div>
        <div class="search-item">
            <Input clearable
            v-model="search.orderNo"
            placeholder="请输入订单号"
            style="width: 150px;"
            ></Input>
        </div>    
        <div class="search-item">
            <Input clearable
            v-model="search.payNo"
            placeholder="请输入支付单号"
            style="width: 150px;"
            ></Input>
        </div>       
        <div class="search-item">
            <Input clearable
            v-model="search.userId"
            placeholder="请输入商品"
            style="width: 150px;"
            ></Input>
        </div>
        <div class="search-item">
            <Select clearable
                style="width:100px;"
                v-model="search.status"
                :label-in-value="true"
                placeholder="请选择状态"
                class="select"
              >
             <Option value="0" label="待付款"></Option>
             <Option value="1" label="待发货"></Option>
             <Option value="2" label="待收货"></Option>
             <Option value="10" label="已收货"></Option>
             <Option value="-1" label="失败"></Option>
             <Option value="-2" label="已退款"></Option>
             <Option value="-9" label="异常"></Option>
             <Option value="-12" label="取消"></Option>
             <Option value="-13" label="自动取消"></Option>
            </Select>
         </div>
         <div class="search-item">
         <Date-picker
                    ref="brithdayPicker"
                    type="datetime"
                    v-model="search.createTimeBegin"
                    placeholder="请选择开始时间"
                    style="width:150px"
                  ></Date-picker>
        </div>
        <div class="search-item">
                  <Date-picker
                    ref="brithdayPicker"
                    type="datetime"
                    v-model="search.createTimeEnd"
                    placeholder="请选择结束时间"
                    style="width:150px"
                  ></Date-picker>
        </div>
         <Button
          style="width: 80px;margin-right: 10px;margin-bottom:5px"
          type="primary"
          icon="ios-search"
          @click="searchFn"
          >查询</Button>
      </div>    
    </div>
    <div class="table">
      <Table
        ref="selection" 
        @on-select="selectSupplier"
        @on-select-cancel="selectSupplier"
        @on-select-all="selectSupplier"
        @on-select-all-cancel="selectSupplier"
        :columns="diyData.columns"
        :data="apiData.tableList"
      >
        <template slot="footer">
          <Button  style="margin-right: 10px;"  @click="batchBlackmail()">批量打单</Button>
             <Page
            :total="apiData.total"
            show-total
            :page-size="search.pageSize"
            :current="search.pageNo"
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"
            class-name="footer-page"
            show-elevator
            show-sizer
          ></Page>
        </template>
      </Table>
    </div>

    <Drawer title="" width="400" :closable="false" v-model="diyDom.showModal">
        <div class="Drawer-content" v-if="apiData.orderInfo">
            <div class="status">
              {{apiData.orderInfo.statusName}}
            </div>
            <div class="Drawer-content-list">
              <div class="content-item-title">
                收货信息：
              </div>
               <div class="content-item-center">
                <p>{{apiData.orderInfo.name}} {{apiData.orderInfo.phone}}</p>
                <p>{{apiData.orderInfo.address}}</p>
              </div>
            </div>
             <div class="Drawer-content-list">
              <div class="content-item-title">
                买家备注：
              </div>
               <div class="content-item-center">
                {{apiData.orderInfo.buyerRemark||'无'}}
              </div>
            </div>
             <div class="Drawer-content-list">
              <div class="content-item-title" style="line-height: 30px;">
                快递信息：
              </div>
               <div class="content-item-center" v-if="apiData.orderInfo.status==1||apiData.orderInfo.status==3||apiData.orderInfo.status==4">
                   <Select clearable
                      style="width:100px;"
                      v-model="form.expressCompany"
                      @on-change="setCourierCompany"
                       allow-create 
                       @on-create="handleCreate"
                      :label-in-value="true"
                      filterable
                      placeholder="请选择快递公司"
                      class="select"
                    >
                  <Option v-for="(item,index) in apiData.courierCompany" :key="index" :value="item.name" >{{item.name}}</Option>
                 </Select>
                 <Input clearable
                    v-model="form.deliveryNo"
                    placeholder="请输入快递单号"
                    style="width: 150px;"
                    ></Input>
              </div>
              <template v-else>
               <div class="content-item-center" style="line-height: 30px;" v-if="apiData.orderInfo.expressCompany||apiData.orderInfo.deliveryNo">
                  {{apiData.orderInfo.expressCompany}}  {{apiData.orderInfo.deliveryNo}}
                </div>
                <div class="content-item-center" style="line-height: 30px;" v-else>无</div>
              </template>
            </div>
            <Divider dashed />
            <div class="Drawer-content-list">
              <div class="content-item-title">
                订单号：
              </div>
               <div class="content-item-center">
                {{apiData.orderInfo.orderNo||'无'}}
              </div>
            </div>
            <div class="Drawer-content-list">
              <div class="content-item-title">
                购买商品：
              </div>
               <div class="content-item-center">
                    <div class="content-item-center-box" v-for="(item,index) in apiData.orderInfo.details" :key="index">
                      <div class="content-item-center-box-title">
                        {{item.title}}<span v-if="item.type==2">[试样]</span>
                      </div>
                      <div class="content-item-center-box-content">
                        规格：{{item.skuName}}
                      </div>
                      <div class="content-item-center-box-content" v-if="item.typeName">
                        类型：{{item.typeName}}
                      </div>
                      <p class="num">x{{item.num}}</p>
                    </div>
                    <p>共{{apiData.orderInfo.qty}}件商品</p>
              </div>
            </div>
            <div class="Drawer-content-list">
              <div class="content-item-title">
                商品金额：
              </div>
               <div class="content-item-center">
                {{apiData.orderInfo.price||'无'}}
              </div>
            </div>
            <div class="Drawer-content-list">
              <div class="content-item-title">
                优惠金额：
              </div>
               <div class="content-item-center">
                {{apiData.orderInfo.discountAmount||'无'}}
              </div>
            </div>
            <div class="Drawer-content-list">
              <div class="content-item-title">
                运费：
              </div>
               <div class="content-item-center">
                {{apiData.orderInfo.deliveryFee||'无'}}
              </div>
            </div>
            <div class="Drawer-content-list">
              <div class="content-item-title">
                实付金额：
              </div>
               <div class="content-item-center">
                {{apiData.orderInfo.relAmount||'0'}}
              </div>
            </div>
             <div class="Drawer-content-list" v-if="apiData.orderInfo.payUserPhone">
              <div class="content-item-title">
                他人代付
              </div>
               <div class="content-item-center">
                {{apiData.orderInfo.payUserPhone}}
              </div>
            </div>
            <Divider dashed />
            <div class="Drawer-content-list">
              <div class="content-item-title">
                下单时间：
              </div>
               <div class="content-item-center">
                {{apiData.orderInfo.createTime||'--'}}
              </div>
            </div>
            <div class="Drawer-content-list"  v-if="apiData.orderInfo.payTime">
              <div class="content-item-title">
                支付时间：
              </div>
               <div class="content-item-center">
                {{apiData.orderInfo.payTime||'--'}}
              </div>
            </div>
            <div class="Drawer-content-list" v-if="apiData.orderInfo.sendTime">
              <div class="content-item-title">
                发货时间：
              </div>
               <div class="content-item-center">
                {{apiData.orderInfo.sendTime||'--'}}
              </div>
            </div>
            <div class="Drawer-content-list" v-if="apiData.orderInfo.completeTime">
              <div class="content-item-title">
                完成时间：
              </div>
               <div class="content-item-center">
                {{apiData.orderInfo.completeTime||'--'}}
              </div>
            </div>
            <Divider dashed />
             <div v-if="apiData.orderInfo.status==1">
              <Button style="width: 90px">打单</Button>
              <Button type="primary" style="width: 90px; margin-left: 20px" @click="getOrderinfoSendOut" >发货</Button>
            </div>
        </div>
    </Drawer>
     <Drawer title="" width="400" :closable="true" v-model="diyDom.showDelivery">
        <div class="Drawer-content" v-if="apiData.orderInfo">
            <div class="status">
              {{apiData.orderInfo.statusName}}
            </div>
            <div class="Drawer-content-list">
              <div class="content-item-title">
                收货信息：
              </div>
               <div class="content-item-center">
                <p>{{apiData.orderInfo.name}} {{apiData.orderInfo.phone}}</p>
                <p>{{apiData.orderInfo.address}}</p>
              </div>
            </div>
            <div class="Drawer-content-list">
              <div class="content-item-title">
                买家备注：
              </div>
               <div class="content-item-center">
                {{apiData.orderInfo.buyerRemark||'无'}}
              </div>
            </div>
            <div class="Drawer-content-list">
              <div class="content-item-title" style="line-height: 30px;">
                快递信息：
              </div>
              <template>
               <div class="content-item-center" style="line-height: 30px;" v-if="apiData.orderInfo.expressCompany||apiData.orderInfo.deliveryNo">
                  {{apiData.orderInfo.expressCompany}}  {{apiData.orderInfo.deliveryNo}}
                </div>
                <div class="content-item-center" style="line-height: 30px;" v-else>无</div>
              </template>
            </div>
            <div class="deliveryList-center" v-for="(item,index) in apiData.deliveryList" :key="index">
              <div class="updateTime">{{item.time}}</div>
              <div class="deliveryInfo">{{item.context}}</div>
              <div class="dian"></div>
            </div>  
        </div>
    </Drawer>

   <Modal
        v-model="diyDom.showModalRefund"
        title="订单退款">
        <Form ref="form" :label-width="100">
            
            <FormItem prop="amount"  label="退款金额" >
              <Input v-model="diyData.amount" type="text"  placeholder="请输入退款金额" style="width: 300px"/>
            </FormItem>
        </Form>
        <div slot="footer">
          <Button style="width: 90px" @click="modalCancel()">取消</Button>
          <Button type="primary" style="width: 90px; margin-left: 20px" @click="submitRefund" >确定</Button>
        </div>

    </Modal>
  </div>
</template>

<script>
import axios from 'axios'
import {apiOrderinfoList,apiOrderinfoInfo,apiOrderinfoSendOut,apiDeliveryInfo,apiPrinrtOrderrefund} from '@/api/order-records.js'
import { getDateTime } from '@/libs/util'
export default {
  name: 'order-records',
  data () {
    return {
      
      orderNos:'',
      
      search: {
        nickname:'',
        orderNo:'',
        telecom:'',
        countryCode:'',
        payNo:'',
        userId:'',
        phone:'',
        type:'',
        status:'',
        pageNo: 1,
        pageSize: 10,
        clientId:'',
        createTimeEnd:'',
        createTimeBegin:'',
      },
      diyDom:{
        showModal:false,
        showModalRefund:false,
        showDelivery:false,
      },
      form:{
        expressCompany:'',
        expressCompanyCode:'',
        deliveryNo:'',
        orderNo:'',
      },
      diyData: {
        orderNos:'',
        orderNo:'',
        amount:'',
        columns: [
           {
              type: 'selection',
              width: 60,
              align: 'center'
          },
          {
            title: '订单号/支付单号',
            width:'250px',     
            key: 'orderNo', 
             render: (h, params) => {
              return h('div', [
                h('p', params.row.orderNo),
                h('p', params.row.payNo)
              ])
             }     
          },
           {
            title: '昵称/手机号',
            width:'150px',
            key: 'phone',
             render: (h, params) => {
              return h('div', [
                h('p', params.row.nickname),
                h('p', params.row.phone)
              ])
             }
          },
          {
            title: '购买商品',
            width:'150px',
           render: (h, params) => {
              return h('div', [
                h('p', params.row.title),
                h('p',
                {
                  style: {display:params.row.qty>1?'':'none'}
                },
                '等'+params.row.qty+'件商品')
              ])
             }
          },
          {
            title: '商品金额',
            width:'100px',
            key: 'price',
          },
          {
            title: '优惠金额',
            width:'100px',
            key: 'discountAmount',
          },
          {
            title: '运费',
            width:'120px',
            key: 'deliveryFee',
          },
          {
            title: '实付金额',
            width:'100px',
            key: 'relAmount',
          },
          {
            title: '收货信息',
            width:'200px',
            key: 'address',
          },
          {
            title: '下单时间/支付时间',
            width:'200px',
            render: (h, params) => {
              return h('div', [
                h('p', params.row.createTime),
                h('p',params.row.payTime)
              ])
             }
          },
           {
            title: '状态',
            width:'100px',
            key: 'status',
            render: (h, params) => {
              var color =''
              switch (params.row.status) {
                case 0:
                    color='#383838'
                  break
                case 1:
                 color='#383838'
                  break
                case 2:
                  color='#383838'
                  break
                case 10:
                  color='#2A82E4'
                  break
                case -1:
                  color='#ff0000'
                  break
                case -2:
                  color='#ff0000'
                  break
                case -9:
                  color='#ff0000'
                  break
                
                case -12:
                  color='#A6A6A6'
                  break
                case -13:
                  color='#A6A6A6'
                  break
              }
              return h('div',[
                h('span',{
                    style: {color:color,
                    }
                  },params.row.statusName)
              ])
            }
          },
          {
            title: '发货时间/完成时间',
            width:'200px',
             render: (h, params) => {
              return h('div', [
                h('p', params.row.acceptTime),
                h('p',params.row.completeTime)
              ])
             }
          },
          
           {
            title: '操作',
            width:'400px',
            fixed: 'right',
            render: (h, params) => {
                  return h('div', [
                      h('Button', {
                          props: {
                            size: 'small',
                          },
                          style:{
                            marginRight:'10px',
                              width:'60px',
                              fontSize:'14px',
                          },
                          on: {
                                  click: () => { 
                                     var tatgetRouter=this.$router.resolve({
                                          name: 'order-blackmail',
                                          query: {
                                            orderNos:params.row.orderNo,
                                          },
                                      })
                                      window.open(tatgetRouter.href, '_blank');
                                  }
                              },                            
                          },
                      '打单'
                      ), 
                      //  h('Button', {
                      //     props: {
                      //       size: 'small',
                      //     },
                      //     style:{
                      //       marginRight:'10px',
                      //         fontSize:'14px',
                      //          display: params.row.status != 0&&params.row.status != -1&&params.row.status != -2&&params.row.status != -12&&params.row.status != -13 ? '' : 'none' // 修改: 添加状态判断
                      //     },
                      //     on: {
                      //             click: () => { 
                                    
                      //               this.diyData.orderNo=params.row.orderNo
                      //               this.diyData.amount=''
                      //               this.diyDom.showModalRefund=true
                      //             }
                      //         },                            
                      //     },
                      // '订单退款'
                      // ),                     
                      h('Button', {
                          props: {
                            type: 'primary',
                            size: 'small',
                          },
                          style:{
                              width:'60px',
                              marginRight:'10px',
                              fontSize:'14px',
                              display: params.row.status === 1 ? '' : 'none' // 修改: 添加状态判断
                          },
                          on: {
                              click: () => {
                                this.apiData.orderInfo=''
                                this.diyData.orderNo=params.row.orderNo
                                this.form.orderNo=params.row.orderNo
                                this.diyDom.showModal=true
                                this.getOrderInfo()
                              }
                          },                            
                        },
                      '发货'
                      ),
                      h('Button', {
                          props: {
                            size: 'small',
                          },
                          style:{
                              marginRight:'10px',
                              fontSize:'14px',
                              display: params.row.status != 1 ? '' : 'none' // 修改: 添加状态判断
                          },
                          on: {
                              click: () => {
                                  this.apiData.orderInfo=''
                                  this.diyData.orderNo=params.row.orderNo
                                  this.diyDom.showModal=true
                                  this.getOrderInfo()
                              }
                          },                            
                        },
                      '查看详情'
                      ),
                       h('Button', {
                          props: {
                            size: 'small',
                          },
                          style:{
                              marginRight:'10px',
                              fontSize:'14px',
                              display: params.row.status ==2||params.row.status == 10 ? '' : 'none' // 修改: 添加状态判断
                          },
                          on: {
                              click: () => {
                                 this.apiData.orderInfo=''
                                 this.apiData.deliveryList=[]
                                  this.diyData.orderNo=params.row.orderNo
                                  this.diyDom.showDelivery=true
                                  this.getOrderInfo()
                                  apiDeliveryInfo({orderNo:params.row.orderNo,type:1}).then(res=>{
                                    if(res.data.deliveryInfo){
                                        this.apiData.deliveryList=JSON.parse(res.data.deliveryInfo)
                                      }
                                    
                                  })
                              }
                          },                            
                        },
                      '物流详情'
                      ),
                  ])
                }
          },
        ]
      },
      apiData: {
        total: 0,
        tableList: [],
        orderInfo:'',
        countriesAllList:[],
        alltelecomList:[],
        courierCompany:[],
        deliveryList:[],
      }
    }      
  },
  methods: {
    modalCancel(){
          this.diyData.orderNo=''
          this.diyData.amount=''
          this.diyDom.showModalRefund=false
    },
    submitRefund(){
      var obj={
        amount:this.diyData.amount,
        orderNo:this.diyData.orderNo,
      }
       if(!this.diyData.amount){
      return this.$Message.error('请填写退款金额')
     }
      apiPrinrtOrderrefund(obj).then(res=>{
         this.$Message.success('退款成功')
          this.getTableList()
          this.modalCancel()
      })
    },
    selectSupplier(e){
      var orderNos=e.map(res=>{
          return res.orderNo
      })
      this.diyData.orderNos=orderNos.join(',')
    },
    batchBlackmail(){
     if(this.diyData.orderNos==''){
      return this.$Message.error('请选择订单')
     }
      var tatgetRouter=this.$router.resolve({
          name: 'order-blackmail',
          query: {
            orderNos:this.diyData.orderNos,
          },
      })
       window.open(tatgetRouter.href, '_blank');
    },
    getCourierCompany(){
      var that=this
      axios.get('http://manage.cqhuoshiji.com/utils/courierCompany.js').then(function (response) {
       console.log(response.data)
       that.apiData.courierCompany=response.data
      })
 
    },
   setCourierCompany(){
      var that=this
      this.apiData.courierCompany.forEach(v=>{
        if(v.name==that.form.expressCompany){
          that.form.expressCompanyCode=v.value
        }
      })
    },
    handleCreate(val){
      var that=this
      this.form.expressCompany=val
      this.apiData.courierCompany.push({
        value:'',
        name:val
      })
      
    },
        // 分页
    pageChange (e) {
      this.search.pageNo = e
      this.getTableList()
    },
    pageSizeChange (e) {
      this.search.pageSize = e
      this.search.pageNo = 1
      this.getTableList()
    },
    // 搜索
    searchFn () {
      this.search.pageNo = 1
      this.getTableList()
    }, 
    getTableList(){
      this.$store.commit('setSpinShow', true)
      var opt = { ...this.search }
      opt.createTimeBegin= getDateTime(this.search.createTimeBegin)
        opt.createTimeEnd= getDateTime(this.search.createTimeEnd)
      apiOrderinfoList(opt).then((res) => {
        const {
          list,
          totalCount
        } = res.data
        
        this.apiData.tableList = list
        this.apiData.total = totalCount
      }).finally(() => this.$store.commit('setSpinShow', false))
    },
  getOrderInfo(){
    apiOrderinfoInfo({orderNo:this.diyData.orderNo}).then(res=>{
      this.apiData.orderInfo=res.data
    })
  },
  getOrderinfoSendOut(){
    var that=this
    this.$Modal.confirm({
        title: '提示',
        content: '是否确认发货？',
        onOk: () => {
             apiOrderinfoSendOut({...that.form}).then(res=>{
              that.$Message.success('发货成功')
              that.diyDom.showModal=false
              that.getTableList()
            }) 
        }
    });

    
  }
  },
   mounted () {
    this.getTableList()
    this.getCourierCompany()
  },
}
</script>

<style scoped lang="less">
.template{
  width: 100%;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
}
.button-border{
  margin-right: 10px;
  
}
.Drawer-content{
  width: 100%;
  .status{
    font-size: 24px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 34.75px;
      color: rgba(212, 48, 48, 1);
      text-align: left;
      margin-bottom: 15px;
  }
  .Drawer-content-list{
    width: 100%;
    margin-bottom: 15px;
    display: flex;
    .content-item-title{
      width: 80px;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 17.38px;
      color: rgba(56, 56, 56, 1);
      text-align: left;
    }
    .content-item-center{
      width: 365px;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0px;
      color: rgba(56, 56, 56, 1);
      text-align: left;
      p{
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0px;
        color: rgba(56, 56, 56, 1);
        text-align: left;
      }
      p.name{
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0px;
        line-height: 20.27px;
        color: rgba(0, 0, 0, 1);
      }
      .content-item-center-box{
        width:100%;
        padding: 0px 0 10px;
        box-sizing: border-box;
        border-bottom: 1px solid #E5E5E5;
        margin-bottom: 10px;
        position: relative;
        .num{
          position: absolute;
          right: 10px;
          bottom: 10px;
        }
        .content-item-center-box-title{
          font-size: 14px;
          font-weight: 700;
          letter-spacing: 0px;
          line-height: 20.27px;
          color: rgba(0, 0, 0, 1);
          margin-bottom: 5px;
        }
        .content-item-center-box-content{
            font-size: 12px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 17.38px;
            color: rgba(128, 128, 128, 1);
             margin-bottom: 3px;
        }
      }
    }
  }
}

.deliveryList-center{
  width: 100%;
  padding:0px 10px 20px; 
  box-sizing: border-box;
  border-left: 1px solid #FD7247;
  position: relative;
  
}
.updateTime{
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}
.deliveryInfo{
  font-size:14px;
  color: #333;
}
.dian{
  position: absolute;
  top: -4px;
  left: -4px;
  width: 6px;
  height: 6px;
  background: #FD7247;
  border-radius: 50%;
  display: block;
}
</style>
